<template>
  <el-dialog
    width="40%"
    :title="title"
    :lock-scroll="true"
    custom-class="formDialog"
    :close-on-click-modal="true"
    :modal-append-to-body="false"
    @close="close"
    :visible="dialogFormVisible"
  >
    <!-- slot="title"组件弹窗slot -->
    <comTitle slot="title">
      <template #title>
        <span class="fs-24 mr-16">{{ title }}</span>
      </template>
    </comTitle>
    <div class="form" :style="{ height: height + '%' }">
      <slot name="form" />
    </div>
    <div class="bottom">
      <slot name="bottom" />
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "formDialog",
  props: {
    height:{
      type: Number,
      default: 100,
    },
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    close() {
      this.$emit("close", false);
    },
    /* 导出 */
  },
};
</script>

<style lang="scss" scoped>
.formDialog {
  .form {
  }
  .table {
    height: 90%;
    border: 1px solid #dde4eb;
  }
  /deep/.el-dialog__body {
    height: 77% !important;
  }
  .commonTitle {
    height: 100px !important;
  }
  .more {
    cursor: pointer;
    margin-left: 24px;
    width: 90px;
    height: 28px;
    border: 1px solid #00bfb1;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00bfb1;
    line-height: 28px;
  }
  .input {
    height: 28px;
    line-height: 24px;
    margin-right: 20px;
    /deep/.el-input__inner {
      height: inherit !important;
      line-height: inherit !important;
    }
  }
}
</style>